<!-- 3.4 HTML5语义化标签的应用
HTML5引入了一系列语义化标签，它们不仅定义了内容的区块，
还描述了其含义和目的，使代码结构更清晰，更利于搜索引擎优化（SEO）和可访问性。 -->


<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5语义化标签示例</title>
 <!--    <style>
        header, nav, main, article, section, aside, footer { border: 1px solid #ccc; margin: 10px; padding: 15px; }
        nav ul { list-style: none; padding: 0; }
        nav li { display: inline; margin-right: 20px; }
    </style> -->
</head>
<body>

    <header> 
        <h1>网站名称或Logo</h1>
        <p>网站副标题或简介</p>
    </header>

    <nav>
    
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#news">文章</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
    </nav>

    <main> 
        
        <article>
            <header>
                <h2>一篇关于语义化标签的文章</h2>
                <p>发布日期: <time datetime="2025-9-27">2025年9月27日</time></p>
            </header>

            <section> 
                <h3>什么是语义化标签？</h3>
                <p>语义化标签是指...</p>
                <figure> 
                    <img src="semantic-html.jpg" alt="HTML5语义化结构图解">
                    <figcaption>图1: HTML5文档结构示例</figcaption> 
                </figure>
            </section>

            <section>
                <h3>为什么使用语义化标签？</h3>
                <p>使用它们的好处是...</p>
            </section>

            <footer>
                <p>文章标签: <mark>HTML5</mark>, <mark>Semantic Web</mark></p>
            </footer>
        </article>

    </main>

    <aside> 
        <h3>相关推荐</h3>
        <ul>
            <li><a href="#">链接一</a></li>
            <li><a href="#">链接二</a></li>
        </ul>
    </aside>

    <footer> 
        <p>© 2025 XX网站. 保留所有权利.</p>
        <address>联系我们: <a href="mailto:contact@example.com">contact@example.com</a></address>
    </footer>

</body>
</html>